.container {
  margin: auto;
  padding-top: 142px;
  width: 1600px;
  .head {
    display: flex;
    .right {
      margin-left: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #333;
      .title {
        font-weight: bold;
        font-size: 40px;
        margin-bottom: 20px;
      }

      .info {
        font-size: 20px;
        margin-bottom: 10px;
        > span {
          margin-right: 20px;
        }
        > span:last-of-type {
          font-size: 12px;
          color: var(--el-color-primary);
          border: 1px solid var(--el-color-primary);
          padding: 2px 10px;
          border-radius: 4px;
        }
      }
      .types {
        display: flex;
        color: #333;
        .item {
          padding-right: 30px;
          border-right: 1px solid #ddd;
          margin-right: 30px;
          cursor: pointer;
          font-size: 14px;
          > span:last-of-type {
            font-weight: bold;
            font-size: 24px;
            margin-left: 10px;
          }
        }
        .item:hover,
        .sel {
          color: var(--el-color-primary);
        }
        .item:last-of-type {
          border: none;
        }
      }

      .btns {
        margin-top: 20px;
      }
    }
  }
  .music_list {
    > span {
      font-size: 26px;
      font-weight: bold;
      color: #666;
      margin: 20px 0;
    }
    :deep(.primary_row) {
      --el-table-tr-bg-color: var(--el-color-primary-light-9);
    }
    .el-table {
      --el-table-border-color: transparent;
      --el-table-border: none;
      --el-table-row-hover-bg-color: transparent;
      --el-table-current-row-bg-color: transparent;
      --el-table-header-bg-color: transparent;
      --el-table-bg-color: transparent;
      --el-table-tr-bg-color: transparent;
      --el-table-expanded-cell-bg-color: transparent;
      :deep(.el-table__header-wrapper) {
        box-shadow: 0 0 10px #ddd;
        z-index: 1;
      }
      i {
        cursor: pointer;
        color: #999;
        font-size: 20px;
      }
      i:hover {
        color: var(--el-color-primary);
      }
    }
  }
  .album_list {
    > span {
      font-size: 26px;
      font-weight: bold;
      color: #666;
      margin: 20px 0;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% + 20px);
      margin-top: 20px;
      .item {
        display: flex;
        flex-direction: column;
        font-size: 15px;
        color: #333;
        width: calc((100% - 120px) / 6);
        margin-right: 20px;
        margin-bottom: 20px;
        position: relative;
        .el-image {
          width: 250px;
          height: 250px;
          border-radius: 6px;
        }
        .mask {
          border-radius: 6px;
          position: absolute;
          top: 0;
          left: 0;
          width: 250px;
          height: 250px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ddd;
          background-color: rgba($color: #000000, $alpha: 0.3);
          z-index: 2;
          i {
            font-size: 50px;
          }
          @-webkit-keyframes zoomIn {
            from {
              opacity: 0;
              -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
            }

            50% {
              opacity: 1;
            }
          }

          @keyframes zoomIn {
            from {
              opacity: 0;
              -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
            }

            50% {
              opacity: 1;
            }
          }

          .zoomIn {
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
          }
        }
        > span:first-of-type {
          margin: 10px 0 4px 0;
        }
        > span:last-of-type {
          color: #666;
          font-size: 13px;
        }
      }
    }
  }
  .video_list {
    > span {
      font-size: 26px;
      font-weight: bold;
      color: #666;
      margin: 20px 0;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% + 20px);
      margin-top: 20px;
      .item {
        width: calc((100% - 100px) / 5);
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        position: relative;
        .el-image {
          width: 304px;
          height: 200px;
        }
        .mask {
          border-radius: 6px;
          position: absolute;
          top: 0;
          left: 0;
          width: 304px;
          height: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ddd;
          background-color: rgba($color: #000000, $alpha: 0.3);
          z-index: 2;
          i {
            font-size: 50px;
          }
          @-webkit-keyframes zoomIn {
            from {
              opacity: 0;
              -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
            }

            50% {
              opacity: 1;
            }
          }

          @keyframes zoomIn {
            from {
              opacity: 0;
              -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
            }

            50% {
              opacity: 1;
            }
          }

          .zoomIn {
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
          }
        }
        > span {
          font-size: 15px;
          margin-top: 10px;
        }
        .play {
          display: flex;
          align-items: center;
          color: #999;
          font-size: 12px;
          margin-top: 6px;

          .el-icon {
            font-size: 16px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
